<!-- 编辑弹窗 -->
<template>
  <ele-modal
    inner
    width="80%"
    :movable="false"
    :visible="visible"
    :close-on-click-modal="true"
    :before-close="handleClose"
    custom-class="ele-dialog-form"
    :title="'收款明细'"
    @update:visible="updateVisible" 
  >
  <div class="ele-body">
    <el-card>
      <ele-pro-table ref="table"  row-key="id" :columns="columns" :datasource="datasource"  :need-page="true"  :height="tableHeight" :full-height="tableFullHeight">
      </ele-pro-table>
    </el-card>
  </div>
</ele-modal>
</template>
<script>
  import { QueryRecreceiptitemByCondition } from '@/api/finance/recreceipt';
 
 export default {
    name: 'RecreceiptItemList',

    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
      // 按钮索引
      btnIndex:String,
    },

    data() {
      return {
        form:{},
        fixedHeight:true,
        isDeleted: 0,
        // 表格列配置
        columns: [
          {columnKey: 'index', type: 'index', width: 50, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号',},
          {prop: 'orderNo', label: '业务单号', showOverflowTooltip: true, sortable: 'orderNo',align: 'center',},
          {prop: 'customerName', label: '客户名称',showOverflowTooltip: true,align: 'center',sortable:'customerId'},
          {prop: 'amount', label: '收款金额', showOverflowTooltip: true,align: 'center',sortable:'auitAmount'},
          {prop: 'currencyDesc', label: '币种', width: 100,showOverflowTooltip: true,align: 'center',sortable:'currencyId'},
          {prop: 'rate', label: '汇率',width: 100, showOverflowTooltip: true, align: 'center', sortable: 'rate'},
          {prop: 'bankAccountDesc', label: '收款账户', showOverflowTooltip: true,align: 'center',sortable:'bankAccountId'},
          {
            prop: 'recDate', label: '收款日期', showOverflowTooltip: true, align: 'center',sortable: 'recDate',
            formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue,"YYYY-MM-DD");}
          },
        ],
      };
    },
    computed: {
      // 表格高度
      tableHeight() {
        var fh = this.fixedHeight ? 'calc(100vh - 250px)' : void 0;

        return fh;
      },
      // 表格全屏时高度
      tableFullHeight() {
        var fh =  this.fixedHeight ? 'calc(100vh - 126px)' : null;

        return fh;
      },
    },
    methods: {
       /* 表格数据源 */
      async datasource(params) {
        params.where.pageindex = params.page;
        params.where.pagesize = params.limit;

        //添加排序
        if(params.order.order == null || params.order.order == undefined){
          params.where.orderBys = [{ sort: "createDate", order: 1, }];
        }else{
          params.where.orderBys = [];
          params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
        }

        if(!params.where.conditions)params.where.conditions= [];

        if(this.form.orderId){
          params.where.conditions.push({
            key:"orderId",
            operator: 0,
            value: this.form.orderId,
          });
        }

        params.where.conditions.push({
          key:"recreceiptType",
          operator: 0,
          value:  1,
        });

        let delIndex = params.where.conditions.findIndex((g)=>{
          return g.key == 'deleted';
        })

        if(delIndex>=0){
          params.where.conditions.splice(delIndex,1)
          params.where.conditions.push({ key:"deleted", operator: 0, value: this.isDeleted})
        }else{
          params.where.conditions.push({
            key:"deleted",
            operator: 0,
            value: this.isDeleted,
          });
        }
      
        let data = await QueryRecreceiptitemByCondition(params.where);

        if(data && data.items){
          data.items.map((m)=>{
            m.grey = this.isDeleted;
          })
        }

        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
        
        return {
            list:data.items,
            count:data.totalrecords,
        };
      },

      /* 更新visible */
      updateVisible(value) {
        //更新父组件中的visible的值
        this.$emit('update:visible', value);
      },

      handleClose() {
        this.$emit('update:visible', false);
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where: where });
      },
  },
  
  /* 监听visible属性变化 */
  watch: {
    visible(visible) {
      this.form = this.data;
      this.reload();
    }
  }
};
</script>
<style lang='scss' scoped>
</style>